<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/vue.js"></script>
</head>
<body>
    <!-- 
      https://cn.vuejs.org/v2/guide/components-slots.html
      插槽:又名内容分发
        插槽一般用在自定义组件中
      自定义组件内部写的代码:
        显示还是不显示/在哪里显示/如何显示 ,这就是内容分发所干的活
      具名插槽:
        给slot标签添加name属性,属性值对应到自定义组件内部的内容上:slot="属性值"
        在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除的 attribute
      v-slot :  https://cn.vuejs.org/v2/api/#v-slot 
        就把之前的 slot= "top" 修改为 v-slot:top
    -->
    <div id="app">
        <my-com>
            <h3 slot="top">如何显示</h3>
            <p  slot="bottom">怎么显示</p>
        </my-com> <!-- 1.调用组件的时候 写的内容是不会在页面显示出来的 -->

    </div>
</body>
<template id="com">
    <div>
        <!-- 给slot添加name属性:具名插槽 -->
        <slot name="top"></slot> <!-- 3. 在哪里显示也是 slot 说了算 -->
        {{msg}}
        <slot name="bottom"></slot> <!-- 2. 在子组件结构中添加插槽,上面的 你好呀 就会在页面显示出来 -->
    </div>  
</template>
<script>
    const Com = {
      template:'#com', 
      data(){
        return {
          msg:'hello component'
        }
      } 
    }
    new Vue({
        el:'#app',
        components:{ 
            'my-com':Com
        }

    })
</script>
</html>